<template>
  <div class="modal fade loginModal">
    <!-- 自定义 dialog的宽度为400 -->
    <div class="modal-dialog" style="width:400px;">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">System Login</h4>
        </div>
        <!-- 为modal-body 设置 padding -->
        <div class="modal-body" style="padding:40px 60px;">
          <!-- 用户名 -->
          <div class="input-group input-group-addon-shadow" style="margin-bottom:10px;">
            <div class="input-group-addon"><span class="fa fa-user-o fa-fw" style="color:black"></span></div>
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="User Name"
            v-model="userName">
          </div>
          <!-- 密码 -->
          <div class="input-group input-group-addon-shadow">
            <div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
            <input type="password" class="form-control" id="exampleInputAmount" placeholder="Password"
            v-model="password">
          </div>

          <p class="text-danger">{{ errMsg }}</p>
            
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" @click="login">Login</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
  import users from '@/data/users.vue'
  var login = {
    name: 'loginDialog',
    data () {
      return {
        user: null,
        userName: '',
        password: '',
        errMsg: ''
      }
    },
    methods: {
      onLoginShow () {
        alert('msg');
        this.user = null;
        this.userName = '';
        this.password = '';
        this.errMsg = ''
      },
      login () {
        this.errMsg = '';

        if (this.userName === '') {
          this.errMsg = 'Please input [User Name]';
          return;
        }

        if (this.password === '') {
          this.errMsg = 'Please input [Password]';
          return;
        }

        var isExist = false;
        for (var i = 0; i < users.length; i++) {
          var aUser = users[i];
          if (aUser.userName === this.userName && aUser.pw === this.password) {
            this.user = aUser;
            isExist = true;
            break;
          }
        }

        if (isExist) {
          // 触发loginSucced事件，并传出user信息
          this.$emit('loginSucced', this.user);
        } else {
          this.errMsg = 'User Name or Password is error';
        }
      },
      clear () {
        alert('msg');
      }
    }
  }
  
  $('body').on('show.bs.modal', '.loginModal',
  function () {
    login.user = null;
    login.userName = '';
    login.password = '';
    login.errMsg = ''
  })

  export default login;
</script>

<style scoped>
    .input-group-addon-shadow{
        text-shadow: gray 3px 2px 2px;
    }
</style>